<template>
		<div class="sys-role-list-container">
			<el-card class="breadcrumb-card" ref="condition">
				<!-- 路径导航 -->
				<div slot="header" class="breadcrumb-header">
					<div class="table-header"><i class="el-icon-location-information"/>角色管理</div>
					<div class="btn-list">
						<el-button @click="$router.push({path: '/sys/role/edit', query: {id: ''}})" type="default" size="small">添加<i class="el-icon-plus el-icon--right"></i></el-button>
					</div>
				</div>
				<!-- 筛选条件 --> 
				<el-form class="form" :inline="true">
					<el-form-item label="角色名称">
						<el-input size="small" v-model="tableData.params.name" placeholder="角色名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="default">查询</el-button>
					</el-form-item>
				</el-form>	
			</el-card>
			<!-- 数据列表 -->
			<el-card class="table-card">
				<el-table :height="tableHeight" size="small" style="width: 100%" :data="tableData.list">
					<el-table-column prop="name" label="角色名称"/>
					<el-table-column prop="createTime" label="创建时间" width="180"/>
					<el-table-column align="center" width="80" label="操作" fixed="right">
						<template slot-scope="scope">
							<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>	
			<div class="pagination">
				<el-pagination @current-change="currentChange" background :page-size="tableData.params.pageSize" :page-count="tableData.totalPage" :total="tableData.totalCount" layout="total, prev, pager, next, jumper"/>
			</div>
		</div>
</template>

<script>
import sysRoleApi from '@/api/sysRoleApi'	

export default {
	name: 'sysRole',
	data () {
		return {
			tableHeight: 0,
			tableData: {
				params: {	
					name: '',
					pageNo: 1,
					pageSize: 10,
				},
				totalCount: 0,
				totalPage: 0,
				list: []
			}
		}
	},
	mounted () {
		this.$nextTick(() => { 
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.tableHeight = h - this.$refs.condition.$el.offsetHeight - 160;
		});
	},
	created () {
		this.getDataList();
	},
	methods: {
		/* 获取列表数据 */
		getDataList () {
			sysRoleApi.sysRoleList(this.tableData.params).then(result => {
				this.tableData.totalPage = result.data.totalPage;
				this.tableData.totalCount = result.data.totalCount;
				this.tableData.list = result.data.list;
			})
		},
		/* 页面变化 */
		currentChange (pageNo){
			this.tableData.params.pageNo = pageNo;
			this.getDataList();
		},
		/* 编辑 */
		handleEdit (index, row){
			this.$router.push({path: '/sys/role/edit', query:{id:row.id}});
		}
	}
}	
</script>

<style lang="scss">
.sys-role-list-container{
	
}	
</style>
